<template>
  <div v-if="flag">
    <div class="signbox" @wheel.prevent>
      <div class="signhd clearfix">
        <span class="hd-l">登录</span>
        <span class="close" title="关闭窗体" @mousedown="close"></span>

      </div>
      <div class="zcnt">
    
    <div class="n-log">
       <div class="f-pr">
         <input type="text" placeholder="请输入账号" class="js-input" ref="tex">
       </div>
        <div class="f-pr1">
          <input type="password" class="js-input" placeholder="请输入密码" ref="ps">
        </div>
        <div class="f-pr2 clearfix">
          <input type="checkbox" class="checked">
          <span class="auto">自动登录</span>
          
          <a href="https://id.163.com/mail/retrievepassword#/verifyAccount" class="retrieve" target="blank">忘记密码？</a>
        </div>
        <div class="f-pr3">
           <a href="javascript:;" class="js-p" @mousedown="click_sign">
             <i>登 &nbsp;&nbsp;&nbsp;录</i>
           </a>
           <a href="javascript:;" @mousedown="getIN">获取</a>
        </div>
     
    </div>
         
              
           
     
     
    </div>
    </div>
    <div class="m-mak" @wheel.prevent></div> 
    
 </div>
</template>

<script>
import axios from 'axios'

export default {
     name:'signIn',
     data() {
         return {
            qrCode:'',
            flag:false,
            account:{
               text:'',
               password:''
            }
         }
     },
     methods:{
        close(){
        
          this.flag = false;
        },
        click_sign(){
             
            axios.get('http://localhost:8080/api/login',{
               params:{
                    email:this.$refs.tex.value,
                    password:this.$refs.ps.value,
                }
                   
                  
               
            }).then( () => {
               this.$router.go(0)
            },() => {
              alert('错误')
            })
        },
     
     },
     mounted(){
       this.$bus.$on('sign_state', (el) => {
         this.flag = el
       })
     }
     
 
    
};
</script>

<style scoped lang='less'>

.signbox {
  position: fixed;
  top: 255px;

  left: 570px;
  width: 530px;

  z-index: 9999;
}
.signhd {

  height: 38px;

  padding: 0 45px 0 18px;
  background: #2d2d2d;
  border-bottom: 1px solid #191919;
  border-radius: 4px 4px 0 0;
  .hd-l {
  float: left;
  line-height: 38px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
 }
 .close {
     float: right;
     margin: 16px -24px 0 0 ;
     width: 10px;
     height: 10px;
     
     background: url(../images/layer.png) no-repeat 0 -95px;
     cursor: pointer;
 }
}
.zcnt {
 
    width: 528px;
    height: 268px;
    border: 1px solid #878787;
    border-width:0 1px 1px;
    border-radius: 0 0 4px 4px;
    background: #fff;
   
}
.n-log {
  padding: 30px 0 43px;
  width: 220px;
  margin: 0 auto;
}
.js-input {
  width: 206px;
  height: 19px;
  line-height: 19px;
  padding: 5px 6px 6px;
  border: 1px solid #cdcdcd;
  font-size: 12px;

}
.f-pr1 {
  margin: 10px 0 0;
}
.f-pr2 {
  position: relative;
  margin: 25px 0 0;
}
.auto {
  float: left;
  margin: 0 0 0 34px;
}
.checked {
  position: absolute;
  left: 0;
  top: 3px;
}
.retrieve {
  float: right;
}
.js-p {
  display: inline-block;
  width: 215px;
  background: url(../images/button2.png) no-repeat right -428px;
  i {
    display: inline-block;
    width: 220px;
    height: 31px;
    line-height: 31px;
    text-align: center;
    overflow: hidden;
    background: url(../images/button2.png) no-repeat 0 -387px;
    color: #fff;

  }
}
.f-pr3{
  margin: 20px 0 0;
}
.m-mak {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1001;
}





</style>